audi/app/pages/admin/staff/sales/print/[id].vue

<template>
  <div class="sales--print-page">
    <div class="sales--print-container">
      <!-- 헤더 -->
      <div class="sales--print-header">
        <h1>아우디 공식딜러 고진모터스</h1>
        <div class="audi--logo"><img src="/img/audi_logo.png" /></div>
      </div>

      <!-- 메인 콘텐츠 -->
      <div class="sales--print-content">
        <!-- 사진 영역 -->
        <div class="sales--print-photo">
          <img
            v-if="staff?.photo_url"
            :src="getImageUrl(staff.photo_url)"
            :alt="staff.name"
          />
          <div v-else class="sales--print-photo-empty">사진없음</div>
        </div>

        <!-- 정보 영역 -->
        <div class="sales--print-info">
          <div class="sales--print-row">
            <div class="sales--print-label">전시장</div>
            <div class="sales--print-value">{{ getShowroomName(staff?.showroom) }}</div>
          </div>

          <div class="sales--print-row">
            <div class="sales--print-label">팀</div>
            <div class="sales--print-value">{{ getTeamName(staff?.team) }}</div>
          </div>

          <div class="sales--print-row">
            <div class="sales--print-label">이름</div>
            <div class="sales--print-value sales--print-name">{{ staff?.name }}</div>
          </div>

          <div class="sales--print-row">
            <div class="sales--print-label">직책</div>
            <div class="sales--print-value">{{ getPositionName(staff?.position) }}</div>
          </div>

          <!-- <div class="sales--print-row">
            <div class="sales--print-label">대표번호</div>
            <div class="sales--print-value">{{ staff?.main_phone }}</div>
          </div> -->

          <div class="sales--print-row">
            <div class="sales--print-label">핸드폰</div>
            <div class="sales--print-value">{{ staff?.direct_phone }}</div>
          </div>

          <div class="sales--print-row">
            <div class="sales--print-label">이메일</div>
            <div class="sales--print-value">{{ staff?.email }}</div>
          </div>
        </div>
      </div>

      <!-- 프린트 버튼 (프린트 시 숨김) -->
      <div class="sales--print-actions no-print">
        <button class="sales--print-btn" @click="handlePrint">프린트</button>
        <button class="sales--print-btn sales--print-btn-secondary" @click="handleClose">
          닫기
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import { useRoute, useRouter } from "vue-router";

  definePageMeta({
    layout: "blank",
  });

  const route = useRoute();
  const router = useRouter();
  const { get } = useApi();
  const { getImageUrl } = useImage();

  const staff = ref(null);
  const showrooms = ref([]);

  // 데이터 로드
  const loadData = async () => {
    const id = route.params.id;

    // 영업사원 정보
    const { data: staffData } = await get(`/staff/sales/${id}`);
    if (staffData?.success && staffData?.data) {
      staff.value = staffData.data;
    }

    // 전시장 리스트
    const { data: branchData } = await get("/branch/list", { per_page: 1000 });
    if (branchData?.success && branchData?.data) {
      showrooms.value = branchData.data.items || [];
    }
  };

  // 전시장 이름 가져오기
  const getShowroomName = (showroomId) => {
    const showroom = showrooms.value.find((s) => s.id === showroomId);
    return showroom ? showroom.name : "-";
  };

  // 팀 이름 가져오기
  const getTeamName = (teamId) => {
    if (teamId === 0 || teamId === "0") {
      return "마스터팀";
    }
    return teamId ? `${teamId}팀` : "-";
  };

  // 직책 이름 가져오기
  const getPositionName = (positionCode) => {
    const positions = {
      10: "팀장",
      15: "마스터",
      20: "차장",
      30: "과장",
      40: "대리",
      60: "사원",
    };
    return positions[positionCode] || "-";
  };

  // 프린트
  const handlePrint = () => {
    window.print();
  };

  // 닫기
  const handleClose = () => {
    window.close();
  };

  onMounted(() => {
    loadData();
  });
</script>

<style scoped>
  .audi--logo {
    img {
      max-height: 50px;
    }
  }
  .sales--print-page {
    min-height: 100vh;
    background: #f5f5f5;
    padding: 20px;
  }

  .sales--print-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .sales--print-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sales--print-header h1 {
    font-size: 28px;
    font-weight: bold;
    color: #000;
    margin: 0;
  }

  .sales--print-content {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
  }

  .sales--print-photo {
    flex-shrink: 0;
    width: 200px;
    height: 300px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
  }

  .sales--print-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sales--print-photo-empty {
    color: #999;
    font-size: 14px;
  }

  .sales--print-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .sales--print-row {
    display: flex;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
  }

  .sales--print-label {
    width: 120px;
    font-weight: bold;
    color: #333;
    font-size: 15px;
  }

  .sales--print-value {
    flex: 1;
    color: #555;
    font-size: 15px;
  }

  .sales--print-name {
    font-size: 18px;
    font-weight: bold;
    color: #000;
  }

  .sales--print-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
  }

  .sales--print-btn {
    padding: 12px 32px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #000;
    color: white;
    transition: background 0.2s;
  }

  .sales--print-btn:hover {
    background: #333;
  }

  .sales--print-btn-secondary {
    background: #666;
  }

  .sales--print-btn-secondary:hover {
    background: #888;
  }

  /* 프린트 스타일 */
  @media print {
    .sales--print-page {
      background: white;
      padding: 0;
    }

    .sales--print-container {
      max-width: none;
      box-shadow: none;
      padding: 20px;
    }

    .no-print {
      display: none !important;
    }

    .sales--print-header {
      margin-bottom: 30px;
    }

    .sales--print-content {
      margin-bottom: 0;
    }
  }
</style>